<template>
  <div>
    <!-- 一行分两列，左边占4成，右边占20成 -->
    <el-row>
      <!-- 左边列显示菜单 -->
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-menu :default-active="meunId" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>
                <span>购物商城</span>
              </template>
              <router-link to="/admin/goodslist">
                <el-menu-item index="1-1">内容管理</el-menu-item>
              </router-link>
              <router-link to="/admin/category">
                <el-menu-item index="1-2">分类管理</el-menu-item>
              </router-link>
              <router-link to="/admin/comment">
                <el-menu-item index="1-3">评论管理</el-menu-item>
              </router-link>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-message"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="2-1">内容管理</el-menu-item>
              <el-menu-item index="2-2">分类管理</el-menu-item>
              <el-menu-item index="2-3">评论管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-col>

      <!-- 右边列显示顶部栏和内容 -->
      <el-col :span="20">
        <div class="grid-content bg-purple-dark">
          <!-- 顶部内容 -->
          <el-row class="topStyle">
            <el-col style="margin-top:5px;" :span="6">
              <i class="el-icon-menu"></i>
            </el-col>

            <el-col :offset="11" :span="7">
              欢迎【XXX】登录

              <el-dropdown @command="handleCommand" size="small" split-button type="primary">
                更多菜单
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="logout">注销登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>

          <!-- 中间内容 -->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <router-view></router-view>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .el-submenu .el-menu-item {
    min-width: 0px;
  }

  .topStyle {
    padding: 6px;
    border-bottom: 1px solid #eeeeee;
  }
</style>

<script>
  export default {
    data() {
      return {
        meunId: '1-1'
      }
    },
    created() {
      this.meunId = localStorage.getItem("currentMenuId")
    },
    methods: {
      handleCommand(command) {
        if (command === "logout") {
          const url = 'admin/account/logout'
          this.$axios.get(url).then(response => {
            if (response.data.status == 1) {
              this.$message.error(response.data.message)
              return
            }

            //跳回登录页面
            this.$router.push({name:'login'})
          })
        }
      }
    }
  }
</script>